<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/public.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/index.css"type="text/css"media="all">
    <script src="https://unpkg.com/vue@next"></script>
	<script src="./js/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <title>下拉菜单</title>
</head>
<body>
    <div id="main">
        <!--199010232甘牧霖-->
        <button @click="test">主页</button>
        <transition name="fade"
        enter-active-class="animate__animated animate__zoomInLeft"
        leave-active-class="animate__animated animate__zoomOutLeft">
            <ul v-if="show">
                <li>经典课程</li>
                    <ul>
                        <li><a href="#">Python开发课程</a></li>
                        <li><a href="#">Java开发课程</a></li>
                        <li><a href="#">网站前端开发课程</a></li>
                    </ul>
                <li>热门技术</li> 
                    <ul>
                        <li><a href="#">前端开发技术</a></li>
                        <li><a href="#">网络安全技术</a></li>
                        <li><a href="#">php开发技术</a></li>
                    </ul>
                <li>畅销教材</li>
                    <ul>
                        <li><a href="#">前端开发技术</a></li>
                        <li><a href="#">网络安全技术</a></li>
                        <li><a href="#">php开发技术</a></li>
                    </ul>
                <li>联系我们</li>        
            </ul>

        </transition>
    </div>
</body>

<script>
    const vm=Vue.createApp({
        data(){
            return{
                show: false
            }
        },
        methods: {
            test (){
                this.show=!this.show;
            }
        }
    }).mount('#main');
</script>

</html>